<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="logo">
          <img src="../assets/image/fupin.jpg" alt />
          <div class="title">湖北省扶贫后台管理系统</div>
        </div>

        <div class="logout">
          <el-button type="info" @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#0072bb"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>概况</span>
              </template>
              <el-menu-item index="/allinfo">整体概况</el-menu-item>
               <el-menu-item index="/details">详细信息</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    logout() {
      window.sessionStorage.removeItem('token');
      this.$router.push('/login');
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  .el-container {
    width: 100%;
    height: 100%;
    .el-header {
      height: 100px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      background-color: #0072bb;
      margin: 0;
      padding: 0;
      .logo {
        padding: 5px;
        height: 50px;
        width: 400px;
        display: flex;
        justify-content: flex-start;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          vertical-align: middle;
        }
        .title {
          padding-left: 10px;
          color: #fff;
          line-height: 50px;
          font-size: 24px;
        }
      }
      .logout {
        margin: 5px;
      }
    }
    .el-aside {
      height: 100%;
      background-color: #0072bb ;
    }
  }
}
.el-submenu  {
  width: 200px !important;
}
.el-submenu__title {
  width:160px !important;
}
</style>
